<template>
    <div class="profile-tab-wrap">
        <a-row class="section">
            <a-col :span="16">
                <a-card :bodyStyle="{ padding: 0, height: '428px' }" style="width: calc(100% - 24px)">
                    <require-num-chart v-bind="$attrs" />
                </a-card>
            </a-col>
            <a-col :span="8">
                <a-card :bodyStyle="{ padding: 0, height: '428px' }" style="width: 100%">
                    <require-time-chart v-bind="$attrs" />
                </a-card>
            </a-col>
        </a-row>

        <a-row class="section">
            <a-col :span="24">
                <a-card :bodyStyle="{ padding: 0, height: '428px' }" style="width: 100%">
                    <require-status-chart v-bind="$attrs" />
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import RequireNumChart from './components/RequireNumChart.vue';
import RequireStatusChart from './components/RequireStatusChart.vue';
import RequireTimeChart from './components/RequireTimeChart.vue';
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'ProfileTab',
    components: {
        RequireNumChart,
        RequireStatusChart,
        RequireTimeChart
    }
});
</script>
<style scoped lang="less">
.profile-tab-wrap {
    padding: 24px 0 0 0;
    background: #f0f2f5;
}
.section {
    & + .section {
        margin-top: 24px;
    }
}
</style>